<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直播页面</title>
    <link rel="stylesheet" href="/web/font/css/font-awesome.css">
    <link rel="stylesheet" href="/web/layui/css/layui.css">
    <style>
        .live-cont{
            display: flex;
            flex-wrap: wrap;
        }
        .live-cont .param{
            position: relative;
            width: 250px;
            border:1px solid gainsboro;
            margin: 10px;
        }
        .live-cont .face-title{
            width: 240px;
            height: 100px;
        }
        .live-cont img{
            width: 240px;
            height: 100px;
        }
        .live-cont .back{
            position: absolute;
            bottom: 88px;
            color: #ffffff;
            width: 240px;
            background-color: rgba(1, 14, 14, 0.47);
            height: 44px;
        }
        .live-cont .title{
            padding: 6px 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 16px;
        }
        .live-cont .operate,.live-cont .status,.live-cont .time,.live-cont .face-title{
            margin:0 auto;
        }
        .live-cont .face-title{
            margin-top: 5px;
        }
        .live-cont .operate,.live-cont .status,.live-cont .time{
            width: 240px;
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid gainsboro;
        }
        .live-cont .operate{
            margin-bottom: 5px;
            padding-top: 5px;
            border:none;
        }
        .price .triangle{
            position: absolute;
            top: 5px;
            right: 5px;
            color: red;
            width: 2px;
            height: 2px;
            border-top: 45px solid #ffc800;
            border-left: 100px solid transparent
        }
        .price .text{
            position: absolute;
            right: 8px;
            top: 5px;
            color:red;
        }
    </style>
</head>
<body>
<ul class="layui-timeline">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月18日</h3>
            <div class="live-cont">
                <div class="param" data-push_url="服务地址" data-push_key="串流秘钥">
                    <div class="face-title">
                        <img src="/web/img/face1.jpg" alt="">
                        <div class="back">
                            <div class="title">庞继光-深度剖析颈椎结构</div>
                        </div>
                    </div>
                    <div class="price">
                        <div class="triangle"></div>
                        <div class="text">￥5.00</div>
                    </div>
                    <div class="status">当前状态：已开始</div>
                    <div class="time">直播时间：04-04 04:00 ~ 04-31 04:00</div>
                    <div class="operate">
                        <div class="layui-btn layui-btn-xs live-account">直播账号</div>
                        <div class="layui-btn layui-btn-normal layui-btn-xs">修改</div>
                        <div class="layui-btn layui-btn-danger layui-btn-xs">删除</div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

</body>
</html>
<script src="/web/layui/layui.js"></script>
<script src="/web/jquery.min.js"></script>

<script>
    var num = "0.01";
    if(num == 0){
        console.log(1);
    }else{
        console.log(2);
    }


    layui.use(['layer'],function () {
        var layer = layui.layer;

        $(".live-account").click(function () {
            var url = $(this).parents(".param").data("push_url");
            var key = $(this).parents(".param").data("push_key");
            layer.open({
                type: 1,
                title: '直播账户信息',
                shadeClose: true,
                shade: 0.8,
                area: ['80%', '200px'],
                content: '' +
                    '<table class="layui-table" style="width: 90%;margin: 25px auto;">\n' +
                    '    <colgroup>\n' +
                    '        <col width="150">\n' +
                    '        <col>\n' +
                    '    </colgroup>\n' +
                    '    <tbody>\n' +
                    '    <tr>\n' +
                    '        <td>服务地址</td>\n' +
                    '        <td>'+url+'</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '        <td>贤心</td>\n' +
                    '        <td>'+key+'</td>\n' +
                    '    </tr>\n' +
                    '    </tbody>\n' +
                    '</table>'
            });
        });
    })
</script>
